<template>
    <view class="container">
        <view calss="header">
            <view class="buttons">
                <up-copy :content="strContent">
                    <up-button type="success" text="一键复制转发到群" style="width: 120px;" @click="cutScreen"
                        :disabled="isShowFooter"></up-button>
                </up-copy>
                <view class="switchC">
                    <up-text text="显示操作按钮开关:" style="margin-right: 8px;"></up-text>
                    <up-switch v-model="isShowFooter" @change="onChange"></up-switch>
                </view>
            </view>
            <view class="title">
                <up-text :text="`[${profileStore.profile?.brand}]:求购清单，等你来还价~`" align="center" color="#fff"></up-text>
            </view>
        </view>
        <view class="list">
            <up-list @scrolltolower="scrolltolower" :height="winHeight-106">
                <up-list-item v-for="(item, index) in indexList" :key="index">
                    <MyInfo v-bind="item" />
                </up-list-item>
            </up-list>
        </view>

    </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/models/menbers'
import { useCurrentServe } from '@/stores/models/server';
import { http } from '@/utils/http';
import type { MyInfoProps, MySellInfoProps, ResTradeInfoData } from '@/utils/page_types';
import { onLoad } from '@dcloudio/uni-app';
import { onBeforeMount, reactive, ref } from 'vue';
const profileStore = useMemberStore();

const winHeight = ref();

const indexList = ref<MySellInfoProps[]>([]);
const currentPage = ref(1)
const isShowFooter = ref(true);
const strContent = ref('');
const serverStore =  useCurrentServe();
const onChange = () => {
    isShowFooter.value ? showFooter() : hideFooter();
}

onLoad(()=>{
    winHeight.value=uni.getSystemInfoSync().windowHeight;
   })
const cutScreen = () => {
    console.log("cutScreen!");
    genStrContent();
}

function genStrContent() {
    let tempContent = '';
    tempContent += `[${profileStore.profile?.brand}]的求购清单，欢迎来微信小程序<冰风谷3>报价\n`;
    indexList.value.forEach((item, index) => {
        const str = `${item.title}` + " " + `￥${item.price}\n`;
        tempContent += str
    })
    strContent.value = tempContent;
}

function hideFooter() {
    indexList.value.forEach((item, index) => {
        item.isShowFooter = false;
    })
}

function showFooter() {
    indexList.value.forEach((item, index) => {
        item.isShowFooter = true;
    })
}

onBeforeMount(() => {
    loadMore();
})

const scrolltolower = () => {
    loadMore();
};



const loadMore = async () => {
    console.log("loadTradeInfo", serverStore.serverId)
    const data = await http<Array<ResTradeInfoData>>({
        url: "/informationByUser",
        data: {
            type: 0,
            page: currentPage.value,
            size: 20,
            serverId: serverStore.serverId
        },
        method: "GET"
    });
    console.log("data", data)
    const list = data.data;
    for (let i = 0; i < list.length; i++) {
        let infoData = list[i];
        let obj: MySellInfoProps = {
            id: infoData.sdInfoId,
            title: infoData.title,
            userName: infoData.openId,
            updateTime: infoData.updateAt.toString(),
            price: infoData.price.toString(),
            num: infoData.num.toString(),
            isShowFooter: isShowFooter.value,
            type: '求购',
            status: infoData.status,
            server: infoData.server,
            onDele: onDele,
            onUpdate: onUpdate
        }
        indexList.value.push(obj)
    }
    currentPage.value++;
}

const initList = () => {
    currentPage.value = 1;
    indexList.value.length = 0;
    loadMore();
}

const onDele = async (id: string) => {
    console.log("onDele", profileStore.profile, profileStore.profile?.openid)
    try {
        const data = await http<null>({
            url: "/information",
            data: {
                sdInfoId: id,
                openId: profileStore.profile?.openid,
            },
            method: "DELETE"
        });
        initList();
    } catch (e) {
        console.log("error:", e)
    }

}

const onUpdate = async (id: string) => {
    const data = await http<null>({
        url: "/information",
        data: {
            sdInfoId: id
        },
        method: "PUT"
    });
    initList();
}
</script>


<style scoped>
.container {
    margin-top: 10px;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    background-color: #007aff;
    height: 33px;
    width: 98%;
    margin: 6px auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.switchC {
    display: flex;
    margin-right: 40px;
}
</style>